﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>面积图(曲面)</title>
    <script src="/Content/Scripts/jquery-1.8.3.min.js"></script>
    <script src="/Content/Scripts/highcharts/highcharts.js"></script>

    <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'areaspline'
                },
                title: {
                    text: '主标题'
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 150,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF'
                },
                xAxis: {
                    categories: [
                         '星期一',
                        '星期二',
                        '星期三',
                        '星期四',
                        '星期五',
                        '星期六',
                        '星期日'
                    ]
                },
                yAxis: {
                    title: {
                        text: '数量'
                    }
                },
                tooltip: {
                    shared: true,
                    valueSuffix: ' 个'
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: [{
                    name: '北京',
                    data: [3, 4, 3, 5, 4, 10, 12]
                }, {
                    name: '上海',
                    data: [1, 3, 4, 3, 3, 5, 4]
                }]
            });
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
